<template>
	<view :style="{background: `#f7f8fc url(${imageBaseUrl}/matchbigbj.png) no-repeat top center / 100% 520rpx`}">
		<view class="AMatch">
			<view class="AMatchTop"
				:style="{background: `url(${imageBaseUrl}/matchbj.png) no-repeat top center / 100% 424rpx`}">
				<view class="AMatchTopContainer">
					<view class="AMatchTops">你好~{{companyInfo.companyName}}，已为您匹配最佳政策，快看看吧</view>
				</view>
				<view class="AMatchTopx">
					<view class="AMatchTopxFixed" @click="handleViewDetail()">查看企业信息</view>
					<view class="AMatchTopxLi">
						<view class="AMatchTopxLis">{{matchPolicyLib.recommendPolicyNum}}个</view>
						<view class="AMatchTopxLix">推荐政策</view>
					</view>
					<view class="AMatchTopxLi">
						<view class="AMatchTopxLis">{{matchPolicyLib.policyNum}}个</view>
						<view class="AMatchTopxLix">全部政策</view>
					</view>
					<view class="AMatchTopxLi">
						<view class="AMatchTopxLis">{{matchPolicyLib.maxScore}}分</view>
						<view class="AMatchTopxLix">匹配分值</view>
						<view class="AMatchTopxLiFixed">最高分值</view>
					</view>
					<!-- 				<view class="AMatchTopxLi">
							<view class="AMatchTopxLis">3个</view>
							<view class="AMatchTopxLix">申报中</view>
						</view> -->
				</view>
			</view>
			<view class="AMatchBot">
				<!-- <selectFilter @changeFilterEvent="changeFilterEvent" :isMatch="isMatch" :tabsList="['政策层级', '所属区划', '发布单位']" /> -->
				<view class="Guidex AMatchBotx">
					<view class="PolicyDocumentLi" v-for="(item, index) in matchPolicyLib.policyList" :key="index"
						@click="goToPolicyDetails(item)">
						<view class="MatchReportLisFixed">
							<view class="MatchReportLisFixedCount">{{item.score}}</view>
							<view class="MatchReportLisFixedText">匹配分值</view>
						</view>
						<view class="AMatchBotxTop">
							<view class="PolicyDocumentLiTitle">{{item.policyName}}</view>
							<view class="PolicyDocumentLiTag">
								<view class="PolicyDocumentLiTagli on">
									{{getDictLabel(item.policyLevel, this.policyLevel)}}</view>
								<view class="PolicyDocumentLiTagli">
									{{getDictLabel(item.policyType, this.policyType)}}</view>
								<view class="PolicyDocumentLiTagli">
									{{getDictLabel(item.industryType, this.industryType)}}</view>
								<view class="PolicyDocumentLiTagli" v-if="item.isDeclare == 1"
									style="color: #ffffff; background: #44d6da">申报指南</view>
							</view>
						</view>
						<view class="GuidexLiBot">
							<view class="GuidexLiBotl">{{item.policyPubdept}}</view>
							<view class="GuidexLiBotr">{{item.pubTime}}</view>
						</view>
					</view>
				</view>
			</view>
			<filter :types="types" @changeTypes="changeTypes" />
		</view>
	</view>
</template>

<script>
	import selectFilter from '@/pages/components/selectFilter.vue';
	import filter from '@/pages/components/filter.vue';
	import { useStore } from 'vuex';
	import { DICT_TYPES } from '@/store/modules/dict';
	import { getDictLabel } from '@/utils/dict';
	export default {
		components: {
			filter,
			selectFilter
		},
		computed: {
			imageBaseUrl() {
				return this.$IMAGE_BASE_URL;
			}
		},
		data() {
			return {
				types: false,
				isMatch: false,
				matchPolicyLib: {}, // 匹配政策库对象信息
				companyInfo: {}, // 企业信息
				policyLevel: [], // 政策层级
				policyType: [], // 政策类型
				industryType: [], // 行业分类
			};
		},
		methods: {
			getDictLabel,
			handleViewDetail() {
				uni.navigateTo({
					url: `/pages/enterprise/details/index?creditCode=${this.companyInfo.creditCode}`
				})
			},
			goToPolicyDetails(item) {
				uni.navigateTo({
					url: '/pages/policyDetails/index?id=' + item.id + '&score=' + item.score
				})
			},
			changeTypes() {
				this.types = false
			},
			changeFilterEvent() {
				this.types = true
			}
		},
		mounted() {


		},
		async created() {
			const store = useStore();
      
      // 加载政策层级
      this.policyLevel = await store.dispatch('dict/loadDict', DICT_TYPES.POLICY_LEVEL);
      
      // 加载行业分类
      this.industryType = await store.dispatch('dict/loadDict', DICT_TYPES.INDUSTRY_TYPE);
      
      // 加载政策类型
      this.policyType = await store.dispatch('dict/loadDict', DICT_TYPES.POLICY_TYPE);
			
			this.companyInfo = uni.getStorageSync('companyInfo')
			this.matchPolicyLib = uni.getStorageSync('matchPolicyLib')
		}
	}
</script>

<style lang="scss">

	.AMatch {
		.AMatchTop {
			height: 424rpx;
			margin: 0 24rpx;
			padding: 0 0 29rpx;

			.AMatchTopContainer {
				display: flex;
				justify-content: flex-end;

				.AMatchTops {
					width: 546rpx;
					height: 116rpx;
					padding: 24rpx 26rpx 0;
					box-sizing: border-box;
					margin: 20rpx 0 0;
					font-size: 26rpx;
					color: #ffffff;
					line-height: 42rpx;
				}
			}

			.AMatchTopx {
				display: flex;
				justify-content: center;
				margin: 52rpx 0 0;
				padding: 108rpx 0 0;
				position: relative;

				.AMatchTopxFixed {
					position: absolute;
					left: -10rpx;
					top: 27rpx;
					width: 210rpx;
					height: 50rpx;
					line-height: 50rpx;
					padding: 0 0 12rpx;
					text-align: center;
					font-size: 26rpx;
					color: #ffffff;
					background: url("/static/images/amatchbj.png") no-repeat center / 210rpx 62rpx;
				}

				.AMatchTopxLi {
					text-align: center;
					margin: 0 28rpx;
					position: relative;

					.AMatchTopxLis {
						font-size: 32rpx;
						color: #2f59fe;
						font-weight: bold;
					}

					.AMatchTopxLix {
						font-size: 28rpx;
						color: #8f94aa;
						padding: 7rpx 0 0;
					}

					.AMatchTopxLiFixed {
						position: absolute;
						top: -45rpx;
						left: 40rpx;
						width: 102rpx;
						height: 37rpx;
						font-size: 21rpx;
						color: #ffffff;
						padding: 6rpx 11rpx 11rpx 7rpx;
						background: url("/static/images/amatchbj1.png") no-repeat center / 120rpx 59rpx;
					}
				}
			}
		}

		.AMatchBot {
			// margin: 29rpx 0 0;

			.Guidex {
				width: 100%;
				padding: 0 24rpx 130rpx;
				box-sizing: border-box;

				.PolicyDocumentLi {
					padding: 28rpx 33rpx 12rpx;
					border-radius: 20rpx;
					margin: 0 0 27rpx;
					background: #ffffff;

					.PolicyDocumentLiTitle {
						font-size: 32rpx;
						color: #202020;
						padding: 0 0 20rpx;
					}

					.PolicyDocumentLiTag {
						display: flex;
						justify-content: flex-start;
						flex-wrap: wrap;
						padding: 0 0 19rpx;

						// border-bottom: 1px solid #f1f1f1;
						.PolicyDocumentLiTagli {
							height: 40rpx;
							line-height: 40rpx;
							padding: 0 11rpx;
							border-radius: 10rpx;
							background: #ecf3fc;
							margin-right: 20rpx;
							font-size: 24rpx;
							color: #4e5262;
							margin-bottom: 11rpx;

							&.on {
								color: #ffffff;
								padding: 0 18rpx;
								background: url("/static/images/policybj.png") no-repeat center / 100% 100%;
							}
						}
					}

					.PolicyDocumentLiType {
						width: 248rpx;
						height: 40rpx;
						line-height: 40rpx;
						text-align: center;
						font-size: 24rpx;
						color: #ffffff;
						background: url("/static/images/collbj.png") no-repeat center / 248rpx 40rpx;

						&.green {
							width: 248rpx;
							height: 40rpx;
							background: url("/static/images/collbj.png") no-repeat center / 248rpx 40rpx;
						}

						&.blue {
							width: 271rpx;
							height: 40rpx;
							background: url("/static/images/daishenbaobj.png") no-repeat center / 271rpx 40rpx;
						}

						&.gray {
							width: 103rpx;
							height: 40rpx;
							color: #4e5262;
							background: url("/static/images/jieshubj.png") no-repeat center / 103rpx 40rpx;
						}
					}

					.AMatchBotxTop {
						padding: 0 140rpx 0 0;
					}

					.GuidexLiBot {
						display: flex;
						align-items: center;
						justify-content: space-between;
						padding: 19rpx 0;
						// margin: 20rpx 0 0;
						border-top: 1px solid #f1f1f1;

						.GuidexLiBotl {
							max-width: 420rpx;
							font-size: 28rpx;
							color: #4e5262;
						}

						.GuidexLiBotr {
							font-size: 26rpx;
							color: #4e5262;
							font-family: "Arial";
						}
					}
				}

				&.AMatchBotx {
					padding: 20rpx 24rpx 0;

					.PolicyDocumentLi {
						position: relative;

						// padding-right: 140rpx;
						.MatchReportLisFixed {
							position: absolute;
							right: 0;
							top: 40rpx;
							width: 118rpx;
							height: 90rpx;
							text-align: center;
							background: url("/static/images/reportbj.png") no-repeat center / 118rpx 90rpx;

							.MatchReportLisFixedCount {
								font-size: 26rpx;
								color: #ffffff;
								padding: 10rpx 0 0;
							}

							.MatchReportLisFixedText {
								font-size: 24rpx;
								color: #ffffff;
							}
						}
					}
				}
			}
		}
	}
</style>